<template>
  <div class="box">
    <div class="content">
      <div class="login-wrapper">
        <h1>登录</h1>
        <div class="login-form">
          <div class="username form-item">
            <span>使用用户名登录</span>
            <input v-model="loginObj.username" type="text" class="input-item">
          </div>
          <div class="password form-item">
            <span>密码</span>
            <input v-model="loginObj.password" type="password" class="input-item">
          </div>
          <button class="login-btn" @click="login">登 录</button>
        </div>
        <div class="divider">
          <span class="line"></span>
          <span class="divider-text">其他方式登录</span>
          <span class="line"></span>
        </div>
        <div class="other-login-wrapper">
          <div class="other-login-item">
            <img src="../../assets/img/QQ.png" alt="">
          </div>
          <div class="other-login-item">
            <img src="../../assets/img/WeChat.png" alt="">
          </div>
        </div>
        <div class=" text-center">样式抄自B站UP 大猫是小白</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const { postLogin } = require("@/api/user");
const { reactive } = require("@vue/reactivity");
const { getCurrentInstance, inject } = require("@vue/runtime-core");

const loginObj = reactive({
  username: "",
  password: "",
});
const router = useRouter()
const store = useStore()


const showTips = inject('$showTips')

const login = function () {
  postLogin(loginObj).then((res) => {
    showTips({ content: res.desc })
    if(res.code == 200){
      store.commit('setUserInfo',res.data)
      router.push('/');
    }
  });
};
</script>

<style src="../../assets/css/loginStyle.css" scoped>
</style>